<template>
	<div class="app-container">
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<el-form-item prop="recipientIdList" label="收件人">
				<el-checkbox-group v-model="form.recipientIdList">
					<el-checkbox v-for="item in listPerson" :key="item.userId" :label="item.userId">{{ item.nickName }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item prop="mailTitle" label="邮件标题">
				<el-input v-model="form.mailTitle" style="width: 50%" placeholder="请输入邮件标题" />
			</el-form-item>
			<el-form-item label="文件上传">
				<el-upload
					v-model:file-list="mailUrlList"
					:action="fileUrl"
					multiple
					ref="upload"
					:headers="token"
					name="files"
					:on-success="handleSuccess"
					:on-remove="handleRemove"
					style="width: 340px">
					<el-button type="primary">上传</el-button>
				</el-upload>
			</el-form-item>
			<el-form-item prop="mailContent" label="内容" style="height: 300px">
				<Edit v-model:modelValue="form.mailContent" style="height: 250px" />
			</el-form-item>
			<el-form-item prop="mailStatus" label="选项">
				<el-radio-group v-model="form.mailStatus">
					<el-radio label="2">不发送，保存为草稿</el-radio>
					<el-radio label="1">直接发送</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<div style="line-height: 80px; height: 80px; padding-left: 100px">
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button @click="reback">返回</el-button>
		</div>
	</div>
</template>
<script setup>
import { reactive, toRefs, watch } from 'vue'
import Edit from '@/components/Editor/index'
const { proxy } = getCurrentInstance()
const { mail_category } = proxy.useDict('mail_category')
import { addMail, updateMail, getDraftMail, getPersons } from '@/api/email/email'
import { useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
import { getConfigKey } from '@/api/system/config'
import { getToken } from '@/utils/auth'
const fileUrl = ref('')
getConfigKey('file_upload').then((response) => {
	fileUrl.value = response.msg
})
const pre = ref('')
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
})

const token = { Authorization: 'Bearer ' + getToken() }
const tagsView = useTagsViewStore()
const router = useRouter()
const baseform = ref()
const route = useRoute()

const form = reactive({
	mailId: '',
	mailCategory: '',
	recipientIdList: [],
	mailContent: '',
	mailStatus: '',
	mailTitle: '',
	mailUrlList: []
})
if (route.query.id) {
	getDraftMail({ mailId: route.query.id }).then((res) => {
		for (let item in form) {
			form[item] = res.data[item]
		}
		form.mailCategory = '5'
		form.contactsStatus = ''
		form.mailId
		form['mailUrlList'] = res.data.mailUrlList
		if (res.data.mailUrlList) {
			for (let item of res.data.mailUrlList) {
				mailUrlList.value.push({ name: item, url: item })
			}
		}
		setTimeout(() => {
			form.recipientIdList = res.data['recipientList'].map((e) => {
				return e.recipientUserId
			})
		}, 210)
	})
}
const rules = {
	mailCategory: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
	recipientIdList: [{ required: true, message: '收件人不能为空', trigger: 'blur' }],
	mailContent: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	mailTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
	mailStatus: [{ required: true, message: '选项不能为空', trigger: 'blur' }]
}

const listPerson = ref([])
getPersons().then((res) => {
	listPerson.value = res
})
const mailUrlList = ref([])
const handleSuccess = () => {
	form.mailUrlList = mailUrlList.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url
		}
	})
}
const handleRemove = () => {
	form.mailUrlList = mailUrlList.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url
		}
	})
}
const submit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			if (route.query.caogao == 'true') {
				if (form.mailStatus == '2') {
					updateMail(form).then((res) => {
						proxy.$modal.msgSuccess('修改成功！')
						setTimeout(() => {
							tagsView.delView(router.currentRoute.value)
							router.go(-1)
						}, 500)
					})
				} else {
					form.mailId = null
					addMail(form).then((res) => {
						proxy.$modal.msgSuccess('新增成功！')
						setTimeout(() => {
							tagsView.delView(router.currentRoute.value)
							router.go(-1)
						}, 500)
					})
				}
			} else {
				form.mailId = null
				addMail(form).then((res) => {
					proxy.$modal.msgSuccess('新增成功！')
					setTimeout(() => {
						tagsView.delView(router.currentRoute.value)
						router.go(-1)
					}, 500)
				})
			}
		}
	})
}

const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
:deep(.is-active) {
	background-color: #409eff !important;
}
</style>
